@splidejs/splide

What is @splidejs/splide?

@splidejs/splide is a lightweight, flexible, and powerful JavaScript slider and carousel library. It provides a wide range of features to create responsive, touch-friendly, and customizable sliders and carousels for web applications.

What are @splidejs/splide's main functionalities?

Basic Slider

This code initializes a basic slider using the Splide library. The '.splide' selector targets the HTML element that will contain the slider, and the 'mount()' method sets up the slider.

const splide = new Splide('.splide');
splide.mount();

Autoplay

This code initializes a slider with autoplay functionality. The 'type' option is set to 'loop' to create an infinite loop of slides, and 'autoplay' is set to true to enable automatic sliding.

const splide = new Splide('.splide', {
  type   : 'loop',
  autoplay: true,
});
splide.mount();

Custom Pagination

This code demonstrates how to create a custom pagination for the slider. The 'pagination' option is set to false to disable the default pagination, and a custom pagination element is created and mounted using the 'pagination:mounted' event.

const splide = new Splide('.splide', {
  pagination: false,
});
splide.mount();

const pagination = document.createElement('ul');
pagination.className = 'splide__pagination';

splide.on('pagination:mounted', function (data) {
  data.list = pagination;
});

Responsive Breakpoints

This code configures the slider to be responsive to different screen sizes. The 'breakpoints' option allows you to specify different settings for different screen widths. In this example, the slider will show 1 slide per page on screens smaller than 640px and 2 slides per page on screens smaller than 1024px.

const splide = new Splide('.splide', {
  breakpoints: {
    640: {
      perPage: 1,
    },
    1024: {
      perPage: 2,
    },
  },
});
splide.mount();

Other packages similar to @splidejs/splide

swiper

Swiper is a modern touch slider that is highly customizable and supports a wide range of features including vertical sliders, nested sliders, and parallax effects. It is similar to @splidejs/splide in terms of flexibility and ease of use, but it offers more advanced features and a larger community.

slick-carousel

Slick Carousel is a popular and widely used carousel library that offers a variety of features such as lazy loading, autoplay, and responsive breakpoints. It is similar to @splidejs/splide in terms of functionality, but it has a larger user base and more extensive documentation.

owl.carousel

Owl Carousel is a touch-enabled jQuery plugin that allows you to create responsive and customizable carousels. It is similar to @splidejs/splide in terms of providing a wide range of customization options, but it requires jQuery as a dependency.

README

Splide

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.

• Demo
• Documents

News

• Transform Splidejs to the organization.
• Add slideFocus and waitForTransition options.
• Add type definitions for typescript.
• React Splide is released.
• Vue Splide is released.
• Add resetProgress and throttle options.
• Breakpoints accept drag and pagination.
• Add some themes.
• Grid extension is released.
• Auto Width is implemented. Each slide can have its own width.
• Breakpoints accept 'destroy' option.
• Merge Slides component to Elements.
• Splide can be destroyed.
• Add or remove slides dynamically.
• Video extension is released.
• URL Hash Navigation extension is released.

Features

• Pure JavaScript without any dependencies
• Small size, less than 29kB(11kB gzipped)
• Flexible and extensible
• Multiple slides
• Slide or fade transition by CSS
• Responsive, supporting breakpoints
• Accepting CSS relative units, such as vw, %, rem, etc
• No need to crop images
• Autoplay with progress bar and play/pause buttons
• "Right to left" and vertical direction
• Mouse drag and touch swipe
• Nested slider
• Lazy loading
• Thumbnail slider
• Accessibility friendly, supporting keyboard control and ARIA attributes
• Dynamically adding/removing slides
• Internet Explorer 10

Installation

There are 3 ways to install the Splide on your site.

• NPM
• Download
• CDN

Only the NPM way is explained in the following steps. Visit this page for other methods.

1. Get the latest version by NPM:

   $ npm install @splidejs/splide
   

2. Link to the stylesheet:

   <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
   

3. Write HTML for building a slider:

   <div id="splide" class="splide">
     <div class="splide__track">
       <ul class="splide__list">
         <li class="splide__slide">Slide 01</li>
         <li class="splide__slide">Slide 02</li>
         <li class="splide__slide">Slide 03</li>
       </ul>
     </div>
   </div>
   

4. Initialize Splide. The selector accepts an ID, a class name or an Element itself:

   import Splide from '@splidejs/splide';
   new Splide( '#splide' ).mount();
   

   Note that only the first element will be initialized even if using a class name.

See the Integration section for your Vue or React project.

Options

Changing Options

Pass an object to the second argument of the Splide constructor:

new Splide( '#splide', {
  type   : 'loop',
  perPage: 3,
} );

Or set a data-splide attribute to a root element in a JSON format:

<div id="splide" class="splide" data-splide='{"type":"loop","perPage":3}'>
</div>

Available Options

Here is a list of options and brief explanations. Visit this page for more details.

• type: Determine a slider type.
• rewind: Whether to rewind a slider before the first slide or after the last one.
• speed: Transition speed in milliseconds.
• rewindSpeed: Transition speed on rewind in milliseconds.
• waitForTransition: Whether to prevent any actions while a slider is transitioning.
• width: Define slider max width.
• height: Define slider height.
• fixedWidth: Fix width of slides.
• fixedHeight: Fix height of slides.
• heightRatio: Determine height of slides by ratio to a slider width.
• autoWidth: If true, slide width will be determined by the element width itself. This is for a horizontal slider.
• autoHeight: If true, slide height will be determined by the element height itself. This is for a vertical slider.
• perPage: Determine how many slides should be displayed per page.
• perMove: Determine how many slides should be moved when a slider goes to next or previous page.
• clones: Manually determine how many clones should be generated on one side.
• start: Start index.
• focus: Determine which slide should be focused.
• gap: Gap between slides.
• padding: Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
• easing: Animation timing function for CSS transition.
• arrows: Whether to append arrows.
• arrowPath: Change the arrow SVG path.
• pagination: Whether to append pagination(indicator dots).
• autoplay: Whether to enable autoplay.
• interval: Autoplay interval in milliseconds.
• pauseOnHover: Whether to stop autoplay while a slider is hovered.
• pauseOnFocus: Whether to stop autoplay while a slider elements are focused.
• resetProgress: Whether to reset progress of the autoplay timer when resumed.
• lazyLoad: Enable lazy load for images.
• preloadPages: Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
• keyboard: Whether to control a slider via keyboard.
• drag: Whether to allow mouse drag and touch swipe.
• dragAngleThreshold: The angle threshold for drag.
• swipeDistanceThreshold: Distance threshold for determining if the action is "flick" or "swipe".
• flickVelocityThreshold: Velocity threshold for determining if the action is "flick" or "swipe".
• flickPower: Determine power of flick. The larger number this is, the farther a slider runs by flick.
• flickMaxPages: Limit a number of pages to move by flick.
• direction: Slider direction.
• cover: Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
• accessibility: Whether to enable accessibility(ARIA attributes) or not.
• slideFocus: Whether to add tabindex="0" to visible slides or not.
• isNavigation: Determine if a slider is navigation for another.
• trimSpace: Whether to trim spaces before the fist slide or after the last one.
• updateOnMove: If true, "is-active" class added to the slide element before transition.
• throttle: Throttle duration for the resize event.
• breakpoints: Breakpoints definitions.
• classes: Collection of class names.
• i18n: Collection of texts for i18n.

Extensions

• Video: Assign HTML video, YouTube or Vimeo to slides.
• URL Hash Navigation: Listen to hash change and move a slider to a slide having the hash data attribute.
• Grid: Create rows and cols in a slider.

Integration

Easy to integrate the Splide slider or carousel into your Vue or React project.

• Vue Splide
• React Splide

API and Extension

Splide provides some APIs and the way to customize the behaviour programmatically.

• APIs
• Extension

License

Splide is released under the MIT license. © 2020 Naotoshi Fujita